<template>
    <div>
         <div class="header clearfix">
            <p>学生找回密码</p>
         </div>
         <div class="con">
            <p class="text-title">学生若忘记密码，可由家长初始化其密码</p>
            <p class="text-title">如何初始化密码</p>
            <div class="step oneStep">
                <p><span>1</span> 家长进入“我的”界面，点击孩子信息区</p>
                <img src="../../images/login/unopen.png" alt="">
            </div>
            <div class="step twoStep">
                <p><span>2</span> 点击孩子详情页的“初始化密码”按钮即可</p>
                <img src="../../images/login/Inpwd.png" alt="">
            </div>
         </div>
    </div>
</template>
<style lang="scss" scoped>
.header{
        width: 100%;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
        p{
          width: 1000px;
          height: 108px;
          line-height: 108px;
          color:#333;
          font-size:28px;
          margin:0 auto;
            .span{
                 text-align: left;
            }
            .student-findPassword{
                float: right;
                cursor: pointer;
            }
        }   
}
.con{
    width: 1000px;
    margin: 0 auto;
    .text-title{
        text-align: center;
        height: 32px;
        line-height: 32px;
        margin-top:20px;
        margin-bottom:20px;
    }
    .step{
        float: left;
        width: 400px;
        margin:0 50px;
        span{
            display: inline-block;
            width: 26px;
            height: 26px;
            line-height: 26px;
            background: #ff5e2c;
            color:#fff;
            text-align: center;
            border-radius: 50%;
            margin-right:20px;
        }
        img{
            width:400px;
            height: 500px;
            margin-top:40px;
        }
    }
}
</style>
